<template>
	<view>
		<view v-if="json.length !== 0">
			<!-- 头部 -->
			<view class="caozuo">
				<!-- 全选按钮 -->
				<view>
					<checkbox-group @change="changeAll">
						<checkbox :checked="isChecked"  :class="isChecked==true?'checked':''" class="round sx-check" style="margin-right: 12upx;" ></checkbox>
						<text style="font-weight: bold;font-size: 90%;">全选</text>
					</checkbox-group>
				</view>
				<!-- 删除按钮 -->
				<view>
					<view class="cu-btn sm round"><text class="cuIcon-deletefill" style="margin-right:6upx;" @click="delSelected">删除</text></view>
				</view>
			</view>
			
			<!-- 中部 -->
			<view class="cuIcon-card" v-if="json.length!=0">
				<view v-for="(item,index) in json" :key="index" class="card-item bg-white" style="border-top: #D8D8D8 dashed 2upx;">
					<!-- 左部 -->
					<view class="flex justify-between align-center" style="margin-left: 10upx;">
							<checkbox :checked="item.checked"  :class="item.checked==true?'checked':''" class="round sx-check" style="margin-right: 12upx;" @click="itemSelect(item)"></checkbox>
							<image :src="item.image" @click.stop="goDetails(item)"></image>
					</view>
					<!-- 右部 -->
					<view class="cart-ycontent" style="width:450upx ;" >
						<!-- 上部 -->
						<view @tap="goDetails(item)">
							<view class="flex align-center bg-white" style="height: 80upx;color: black;">
									<image src="../../static/icon/store.png"style="width: 50upx; height: 50upx; "/>老王水果店
							</view>
							<view>
								  <view class="cu-tag bg-gradual-red round" style="font-weight: 600;;">华为</view>
									<view class="text-gray">{{item.skuName}}</view>
							</view>
						</view>
						<!-- 下部 -->
						<view class="flex justify-between"  style="margin-top: 30upx;">
							<view class="text-bold text-lg" style="color: red;">￥{{item.price}}</view>
							<uni-number-box :min="0" :max="9"  v-model="item.count" @change="countChange(item)" style="margin-right: 20upx;"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="noGoods">
				<text style="font-size: 150%;" class="cu-tag  round text-grey" >暂无商品，快去购物吧！</text>
			</view>
			
			<!-- 底部 -->
			<view class="heji">
				<!-- 总价 -->
				<view style="font-size: 120%;">合计:<text class="text-orange" style="padding-left: 8upx;font-size: 120%;">￥{{this.totalPrice}}</text></view>
				<!-- 结算按钮 -->
				<view>
					<view class="cu-btn bg-red round" style="width: 200upx;height: 70upx;margin-bottom: 8upx;" @click="creatOrder">去结算</view>
				</view>
			</view>
		</view>
		
		<view class="nocart flex flex-direction" v-else-if="memberId==''">
			<view  class="iconfont"  style="color:red;"><image src="../../static/icon/youke.png" style="height: 200upx; width: 200upx;"/></view>
			<view  style="margin-top: 180upx;line-height: 80upx;font-size: 110%;">空空如也,<text style="color:#ff0000" @tap="goLogin">马上登陆></text></view>
		</view>
		<!-- 如果购物车没有数据 -->
		<view class="nocart flex flex-direction" v-else>
			<view  class="iconfont"  style="color:red;"><image src="../../static/icon/nogoods-active.png" style="height: 200upx; width: 200upx;"/></view>
			<view  style="margin-top: 180upx;line-height: 80upx;font-size: 110%;">空空如也,<text style="color:#ff0000" @tap="goMarket">随便逛逛></text></view>
		</view>
		
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue" // 导入 NumberBox 数字输入框组件
	export default {
		data() {
			return {
				isChecked: true ,
				memberId: '',
				userInfo: {},
				targetList:[],
				json: []
			}
		},
		onLoad() {
			console.log('onLoad')
			this.getMemberId()
			this.getMyCart()
		},
		onShow() {
			console.log('show')
			this.getMyCart()
		},
		onPullDownRefresh() {
		    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		    console.log('refresh')
				this.getMyCart()
				uni.stopPullDownRefresh();  //停止下拉刷新动画
		},
		methods: {
			getMemberId() {
				uni.getStorage({
					key:'userInfo',
					success:res=>{
						this.userInfo = res.data
						this.memberId = this.userInfo.id
					}
				})
			},
			
			async getMyCart() {
				if(this.memberId==''){
					return
				}
				let res = await this.$request({
					url:'cartorder/cartitem/getCartList',
					params:{
						"memberId":this.memberId
					},
					type:'GET'
				})
				this.json = res.data
				var newArr = []
				this.json.forEach((item,index)=>{
				   newArr.push(
				       Object.assign({},item,{
								 'checked':true,
								 'unitPrice':Number(item.price) / Number(item.count)
							 })
				   )
				})
				this.json = newArr
				this.targetList = newArr
				console.log('this.json',this.json)
			},
			
			changeAll(e){
				this.isChecked = !this.isChecked
				if(this.isChecked){
					this.json.forEach(item => {
						item.checked = true
					})
				}else{
					this.json.forEach(item => {
						item.checked = false
					})
				}
			},
			goLogin() {
				uni.navigateTo({
					url:'../user/login'
				})
			},
			countChange(item){
				var that = this
				if(Number(item.count) == 0){
					var array = that.json
					var index = that.json.indexOf(item)
					uni.showModal({
						cancelText:'取消',
						content:'是否移除?',
						confirmText:'确定',
						cancelColor:'#F37B1D',
						confirmColor:'#BDBDBD',
						success(res) {
							if(res.confirm){
								array.splice(index,1)
								that.deleteOneGoods(item.skuId)
							}else if (res.cancel) {
								item.count = item.count + 1
							}
						}
					})
				}else{
					item.price = item.unitPrice * Number(item.count)
					if(Number(item.count)==9){
						uni.showToast({
							title:'不能再多了',
							icon:'none'
						})
					}
				}
			},
			
			goDetails(item) {
				uni.navigateTo({
					url:`../goods/goodsDetail?skuId=${item.skuId}`
				})
			},
			itemSelect(item){
				item.checked=!item.checked
				var isAllChecked = this.json.every(item=>{
					return item.checked == true
				})
				isAllChecked?this.isChecked=true:this.isChecked=false
			},
			/**
			 * 判断是否有选择商品
			 */
			hasSelected() {
					var that = this
					var json = that.json
					if(this.targetList.length==0){
						uni.showToast({
						    title: '请选择商品项',
								icon:'none'
						});
						return false
					}
					return true
			},
			delSelected(){
				var that = this
				if(this.hasSelected()==true){
					uni.showModal({
					cancelText:'取消',
					content:'是否移除?',
					confirmText:'确定',
					success(res) {
						if(res.confirm){
							that.targetList.forEach(target=>{
								console.log(target)
								var index = that.json.indexOf(target)
								that.json.splice(index,1)
								if(that.deleteOneGoods(target.skuId)){
									uni.showToast({
										title:'移除成功',
										icon:'none'
									})
								}
							})
						}
					}
				})
				}
			},
			
			deleteOneGoods(skuId){
				var memberId = this.memberId
				this.$request({
					url: `cartorder/cartitem/deleteCartItem?memberId=${memberId}&skuId=${skuId}`,
					params:{},
					type:'DELETE'
				}).then(res=>{
					console.log('res',res)
					if(res.code != 500){
						return true
					}
				}).catch(err=>{
					console.log('err',err)
				})
			},
			
			creatOrder(){
				console.log('this.hasSelected',this.hasSelected())
				if(this.hasSelected() == true){
					var objList = []
					this.targetList.forEach(item=>{
						objList.push({
							skuId: item.skuId,
							skuName: item.skuName,
							skuImage: item.image,
							price: item.price,
							unitPrice: item.price / item.count,
							count: item.count
						})
					})
					uni.navigateTo({
						url: `../order/orderDetails?orderInfo=${encodeURIComponent(JSON.stringify(objList))}&userInfo=${encodeURIComponent(JSON.stringify(this.userInfo))}`
					})
				}
			},
			
			goMarket() {
					uni.switchTab({
						url: '/pages/goods/goods'
					});
			}
		},
		components: {
			uniNumberBox
		},
		computed:{
			totalPrice(){
				var totalPrice = 0
				this.targetList = this.json.filter(item=>{
					return item.checked==true
				})
				this.targetList.forEach(item=>{
						totalPrice +=  Number(item.unitPrice) * Number(item.count)
				})
				return totalPrice.toFixed(2)
			}
		}
	}
</script>

<style>
.sx-check {
	transform:  scale(0.7);
}
.caozuo {
	display: flex;
	width: 750upx;
	height: 80upx;
	position: fixed; // 无论怎么滚动,位置都固定
	margin-top: 0.5upx;
	background-color: white;
	justify-content: space-between; // 向两边对齐
	align-items: center; // 纵向居中
	padding-left: 10upx; 
	padding-right: 30upx;
/* 	height: 80upx;
	line-height: 80upx;
	display: flex;
	align-items: center;
	padding: 0 10upx;
	z-index: 900;
	position: relative;
	background-color: #fff; */
}

.cart-content {
	width: 750upx;
	height: 482upx;
	padding-top: 80upx;
}

.card-item {
	display: flex;
	justify-content: space-between;
	padding: 30upx,30upx,30upx,30upx;
	margin-top: 5upx;
}

.card-item image {
	width: 200upx;
	height: 200upx;
}

.card-item-title {
	font-size: 110%;
	font-weight: bold;
}

.cart-ycontent {
	display: flex;
	flex-direction: column; // 竖向排列
	justify-content: space-between; // 上下靠边
	padding-top: 20upx;
	padding-bottom: 20upx;
}

.heji {
	display: flex;
	width: 750upx;
	height: 100upx;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	position: fixed;
	padding-left: 30upx;
	padding-right: 30upx;
	bottom: 0upx;
	/* #ifdef H5 */
	bottom: 88upx;
	/* #endif */
}

.noGoods {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750upx;
		height: 482upx;
		padding-top: 80upx;
	}
	
	/* 购物车为空的样式} */
	.nocart {
		text-align: center;
		margin-top: 30vh;
	}
	
	.nocart .iconfont {
		font-size: 80rpx;
		text-align: center;
	}
	
	.nocart view {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
</style>
